<template>
    <div class="centerBox">
        <ul class="centerTop">
            <li class="liB">
                <p class="biaoNum t1">850 <span class="unit">万</span></p>
                <p class="biao">经营收入</p>
            </li>
            <li class="liB">
                <p class="biaoNum t2">450 <span class="unit">万</span></p>
                <p class="biao">经营利润</p>
            </li>
            <li class="liB">
                <p class="biaoNum t3">186 <span class="unit">国</span></p>
                <p class="biao">业务遍及全球</p>
            </li>
            <li class="liB">
                <p class="biaoNum t4">10000 <span class="unit">家</span></p>
                <p class="biao">服务企业</p>
            </li>
            <li class="liB">
                <p class="biaoNum t5">8 <span class="unit">家</span></p>
                <p class="biao">成员公司</p>
            </li>
            <li class="liB">
                <p class="biaoNum t6">280 <span class="unit">人</span></p>
                <p class="biao">员工人数</p>
            </li>
        </ul>
        <div class="map-container">
            <ul class="mapArr">
                <li class="mapItem">
                    <div class="Heat" ref="Heat" id="Heat"></div>
                </li>
                <li class="mapItem"></li>
            </ul>
            <div class="mapRoll">
                <div class="rolltext">
                    <span class="water_text"
                        >外贸综合服务为核心的产业供应链集成服务，以数字生活服务为核心的消费品供应链集成服务</span
                    >
                </div>
            </div>
            <div class="recheck"></div>
        </div>
    </div>
</template>
  
  <script>
import * as echarts from 'echarts'
import WorldJson from '@/assets/json/worlds.json'
export default {
    data() {
        return {
            // 地图图片
            coverImgUrl: '' // 背景图片的地址，
        }
    },
    mounted() {
        this.map()
        window.addEventListener('resize', function () {
            // mapsChart.resize()
        })
        this.CenterChartgetall()
    },
    computed: {
        bgStyle() {
            return {
                backgroundImage: 'url(' + this.coverImgUrl + ')'
            }
        }
    },
    methods: {
        CenterChartgetall(data) {},
        map() {
            this.$nextTick(() => {
                let maps = this.$refs.Heat
                let mapsChart = this.$echarts.init(maps)
                this.$echarts.registerMap('world', WorldJson)
                let canvas = document.createElement('canvas')
                let mapChart = echarts.init(canvas, null, {
                    width: 2000,
                    height: 1900
                })
                //航线终点位置
                const coord = [
                    [61.210817, 35.650072],
                    [16.326528, -5.87747],
                    [120.202287, 30.257824]
                ]
                //航线起点终点位置
                const lines_coord = [
                    {
                        coords: [
                            [120.202287, 30.257824],
                            [61.210817, 35.650072]
                        ]
                    },
                    {
                        coords: [
                            [120.202287, 30.257824],
                            [16.326528, -5.87747]
                        ]
                    }
                ]
                //航线飞机模型
                var planePath = ''
                mapChart.setOption({
                    backgroundColor: '#2E2677', //地球颜色
                    geo: {
                        name: '地图',
                        // type: 'map',  //地图种类、
                        map: 'world', //地图类型。
                        zlevel: 0,
                        show: true,
                        layoutCenter: ['50%', '50%'],
                        roam: false,
                        layoutSize: '90%',
                        zoom: 1,

                        label: {
                            normal: {
                                show: false,
                                textStyle: {
                                    fontSize: 14,
                                    // 文字顔色
                                    color: '#43D0D6'
                                }
                            }
                        },
                        itemStyle: {
                            //地图区域的多边形 图形样式。
                            emphasis: {
                                //高亮状态下的样试
                                label: {
                                    show: true
                                },
                                areaColor: '#FFB800'
                            },
                            normal: {
                                areaColor: '#1b579c',
                                borderWidth: 0.3, //设置外层边框
                                borderColor: '#1ECEF4'
                            }
                        }
                    },
                    viewControl: {
                        autoRotate: false
                    },
                    series: [
                        {
                            // effectScatter画散点【起点】
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            zlevel: 2,
                            symbolSize: 6,
                            rippleEffect: {
                                period: 3,
                                brushType: 'stroke',
                                scale: 2
                            },
                            itemStyle: {
                                color: '#FFB800',
                                opacity: 0.7
                            },
                            data: coord.slice(2)
                        },
                        {
                            // 画中心散点【终点】,这里是为了区分起点终点不同样式，所以分开写，如果二者样式一样那就直接合在一起写就好了
                            type: 'effectScatter',
                            coordinateSystem: 'geo',
                            zlevel: 2,
                            symbolSize: 10,
                            rippleEffect: {
                                period: 4,
                                brushType: 'stroke',
                                scale: 4
                            },
                            itemStyle: {
                                color: '#FF5722',
                                opacity: 1
                            },
                            data: coord.slice(0, 2)
                        },
                        //这里设了2条不同效果的飞线是为了讲他们叠加起来，满足飞机后面白色的喷气动画效果
                        {
                            type: 'lines',
                            zlevel: 1,
                            effect: {
                                show: true,
                                period: 5,
                                trailLength: 0.7,
                                color: '#fff',
                                symbolSize: 3
                            },
                            lineStyle: {
                                normal: {
                                    color: '#FFB800',
                                    width: 0,
                                    curveness: 0.2
                                }
                            },
                            data: lines_coord
                        },
                        {
                            // lines画线
                            type: 'lines',
                            coordinateSystem: 'geo',
                            zlevel: 2,
                            symbol: ['none', 'arrow'], //设置飞线的起点终点处的绘制图形
                            symbolSize: 12,
                            effect: {
                                show: true,
                                period: 5, //箭头指向速度，值越小速度越快
                                trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                                symbol: planePath, //飞机图标
                                symbolSize: 15, //图标大小
                                color: '#01AAED'
                            },
                            itemStyle: {
                                normal: {
                                    borderWidth: 1,
                                    lineStyle: {
                                        type: 'solid',
                                        shadowBlur: 10
                                    }
                                }
                            },
                            lineStyle: {
                                //飞线的样式
                                normal: {
                                    width: 1.2,
                                    opacity: 0.6,
                                    curveness: 0.2,
                                    color: '#FFB800'
                                }
                            },
                            data: lines_coord
                        }
                    ]
                })

                let option = {
                    globe: {
                        globeRadius: 100,
                        globeOuterRadius: 150,
                        silent: true,
                        shading: 'color',
                        environment: '',
                        baseTexture: mapChart,
                        viewControl: {
                            autoRotate: true // 是否开启视角绕物体的自动旋转查看
                            // autoRotateSpeed: 20, //物体自转的速度,单位为角度 / 秒，默认为10 ，也就是36秒转一圈。
                            // autoRotateAfterStill: 2, // 在鼠标静止操作后恢复自动旋转的时间间隔,默认 3s
                            // rotateSensitivity: 2, // 旋转操作的灵敏度，值越大越灵敏.设置为0后无法旋转。[1, 0]只能横向旋转.[0, 1]只能纵向旋转
                            // targetCoord: [116.46, 39.92], // 定位到北京
                            // maxDistance: 200,
                            // minDistance: 200
                        },
                        light: {
                            main: {
                                color: '#fff',
                                intensity: 1,
                                shadow: false,
                                alpha: 55,
                                beta: 10
                            },
                            ambient: {
                                color: '#fff',
                                intensity: 1
                            },
                            postEffect: {
                                enable: true,
                                SSAO: {
                                    enable: true,
                                    radius: 10
                                }
                            }
                        }
                    }
                }

                mapsChart.setOption(option)
            })
        }
    }
}
</script>
  
  <style scoped lang='scss'>
.centerBox {
    width: 100%;
    vertical-align: top;
    position: relative;
    p {
        padding: 0;
        margin: 0;
    }
    .centerTop {
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 58px;
        .liB {
            width: 121px;
            height: 83px;
            text-align: center;
            background-image: url('../../../assets/cockpit/boxi.png');
            background-size: cover;
            background-position: center center;
            .biao {
                font-size: 17px;
                font-weight: 400;
                color: #ffffff;
                margin-top: 8px;
            }
            .biaoNum {
                font-size: 34px;
                font-family: 'Yourname';
                font-weight: 500;
                color: #23acf3;
                margin-top: 10px;
                .unit {
                    font-size: 15px;
                    color: #ffffff;
                    font-weight: 400;
                    font-family: 'fangzheng';
                    margin-left: -4px;
                }
            }
            .t1 {
                color: #ffb33a;
            }
            .t2 {
                color: #23acf3;
            }
            .t3 {
                color: #f60783;
            }
            .t4 {
                color: #3ffdb4;
            }
            .t5 {
                color: #00f9ff;
            }
            .t6 {
                color: #ffb33a;
            }
        }
    }
    .map-container {
        width: 100%;
        height: 480px;
        margin-top: 8px;
        position: relative;

        .mapArr {
            width: 100%;
            height: 388px;
            box-sizing: border-box;
            padding: 16px 14px 19px 18px;
            display: flex;
            justify-content: space-between;
            background-image: url('../../../assets/cockpit/centBox.png');
            background-size: cover;
            background-position: center center;
            .mapItem {
                width: 377px;
                height: 100%;
                background-image: url('../../../assets/cockpit/centBg.png');
                background-size: cover;
                background-position: center center;
                .Heat {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .mapRoll {
            width: 100%;
            height: 103px;
            background-image: url('../../../assets/cockpit/centBot.png');
            background-size: cover;
            background-position: center center;
            position: absolute;
            left: 0;
            bottom: 9px;
            z-index: 2;
            .rolltext {
                width: 630px;
                overflow: hidden;
                height: 37px;
                line-height: 37px;
                position: absolute;
                top: 15px;
                left: 56px;
            }
            .water_text {
                white-space: nowrap;
                position: absolute;
                display: inline-block;
                top: 0px;
                animation: 16s scroll linear infinite normal;
                font-size: 18px;
                color: #ffffff;
                font-family: 'pingfang';
                letter-spacing: 1px;
            }

            @keyframes scroll {
                0% {
                    right: 0%;
                }
                100% {
                    right: 100%;
                }
            }
        }
        .recheck {
            width: 70px;
            height: 70px;
            background-image: url('../../../assets/cockpit/close.png');
            background-size: cover;
            background-position: center center;
            position: absolute;
            right: 7px;
            bottom: 45px;
            z-index: 3;
        }
    }
}
@keyframes shake {
    0% {
        transform: scale(0);
        transform: rotate3d(1, 1, 1, 360deg);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        transform: rotate3d(1, 1, 1, 0deg);
        opacity: 1;
    }
}
@-webkit-keyframes shake {
    0% {
        transform: scale(0);
        transform: rotate3d(1, 1, 1, 360deg);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        transform: rotate3d(1, 1, 1, 0deg);
        opacity: 1;
    }
}
</style>
  